// index.js
// 获取应用实例
const app = getApp()
// 引入工具
const util = require('../../pages/utils/util')
const {
    envList
} = require('../../envList.js');

Page({
    data: {
        rate: '', // 分辨率
        clockHeight: null, // 时钟页面高度
        clockShow: false, // 切换页面
        time: '5', // 专注时间(分钟)
        mTime: 300000, // 毫秒
        timeStr: '05:00', // 时间显示
        backShow: false, // 返回按钮
        pauseShow: true, // 暂停按钮
        continueCancelShow: false, // 继续、放弃按钮
        timer: null, // 提升变量 计时器
        cateArr: [{
                icon: 'work',
                text: '工作'
            }, {
                icon: 'study',
                text: '学习'
            }, {
                icon: 'think',
                text: '思考'
            },
            {
                icon: 'write',
                text: '写作'
            }, {
                icon: 'sport',
                text: '运动'
            }, {
                icon: 'read',
                text: '阅读'
            }
        ],
        // 点击任务
        cateActive: '0',
    },
    // 加载生命周期
    onLoad: function () {
        var res = wx.getSystemInfoSync(); // 手机信息
        var rate = 750 / res.windowWidth; // 分辨率
        var clockHeight = rate * res.windowHeight;
        this.setData({
            rate: rate,
            clockHeight: clockHeight
        });
    },
    // 滑动进度条
    slideChange: function (e) {
        this.setData({
            time: e.detail.value
        })
    },
    // 点击任务
    clickCate: function (e) {
        this.setData({
            cateActive: e.currentTarget.dataset.index
        })
    },
    // 开始专注
    start: function () {
        this.setData({
            clockShow: true,
            mTime: this.data.time * 60 * 1000, // 专注时长（毫秒
            timeStr: parseInt(this.data.time) >= 10 ? `${this.data.time}:00` : `0${this.data.time}:00`
        });
        // 调用 画圆
        this.drawCircle();
        this.drawActive();
    },
    // 画圆 - 背景黑色
    drawCircle: function () {
        const lineWidth = 6 / this.data.rate; // 转成px单位 lineWidth：宽度
        const query = wx.createSelectorQuery();
        query.select('#progress_bg')
            .fields({
                node: true,
                size: true
            })
            .exec(res => {
                const canvas = res[0].node;
                const ctx = canvas.getContext('2d');
                const dpr = wx.getSystemInfoSync().pixelRatio;
                canvas.width = res[0].width * dpr;
                canvas.height = res[0].height * dpr;
                ctx.scale(dpr, dpr);
                ctx.lineCap = 'round'; // 断点形状
                ctx.lineWidth = "lineWidth"; // 线条宽度
                ctx.beginPath(); // 路径
                // 画圆 arc(横轴坐标，竖轴坐标，半径，)
                ctx.arc(400 / this.data.rate / 2, 400 / this.data.rate / 2, 400 / this.data.rate / 2 - 2 * lineWidth, 0, 2 * Math.PI, false);
                ctx.strokeStyle = "#000000"; // 填充颜色
                ctx.stroke(); // 填充
            })
    },
    // 画圆 - 动态白色
    drawActive: function () {
        const _this = this; // 保存this指针
        var timer = setInterval(() => {
            var currTime = _this.data.mTime - 100; // 当前时间
            var angle = 1.5 + 2 * (_this.data.time * 60 * 1000 - _this.data.mTime) / (_this.data.time * 60 * 1000); // 转过角度
            _this.setData({
                mTime: currTime
            })
            if (angle < 3.5) {
                if (currTime % 1000 === 0) { // 整秒
                    var allSecond = currTime / 1000; // 整秒数
                    var min = parseInt(allSecond / 60); // 分钟数
                    var sec = (allSecond - min * 60) >= 10 ? (allSecond - min * 60) : '0' + (allSecond - min * 60); // 秒数
                    min = min >= 10 ? min : '0' + min; // 格式化分钟
                    _this.setData({
                        timeStr: min + ':' + sec
                    })
                }
                const lineWidth = 6 / _this.data.rate; //px
                const query = wx.createSelectorQuery();
                query.select('#progress_active')
                    .fields({
                        node: true,
                        size: true
                    })
                    .exec((res) => {
                        const canvas = res[0].node;
                        const ctx = canvas.getContext('2d');
                        const dpr = wx.getSystemInfoSync().pixelRatio;
                        canvas.width = res[0].width * dpr;
                        canvas.height = res[0].height * dpr;
                        ctx.scale(dpr, dpr);
                        ctx.lineCap = 'round';
                        ctx.lineWidth = "lineWidth";
                        ctx.beginPath();
                        ctx.arc(400 / _this.data.rate / 2, 400 / _this.data.rate / 2, 400 / _this.data.rate / 2 - 2 * lineWidth, 1.5 * Math.PI, angle * Math.PI, false);
                        ctx.strokeStyle = "#FFFFFF";
                        ctx.stroke();
                    });
            } else {
                // 修改数据
                var logs = wx.getStorageSync('logs') || []; // 获取数据
                //console.log('logs:',logs); // ok
                logs.unshift({                          // 添加数据
                    date: util.formatTime(new Date), // 日期
                    cate: _this.data.cateActive,    // 事件
                    time: _this.data.time           // 时长
                });
                //console.log('logs:',logs); // ok

                wx.setStorageSync('logs', logs);    // 存入
                // 计时结束 重置
                _this.setData({
                    timeStr: '00:00',
                    backShow: true, // 显示“返回键”
                    pauseShow: false,
                    continueCancelShow: false,
                    time: '5', // 专注时间(分钟)
                });
                clearInterval(timer);
                console.log('已结束');
            }
        }, 100);
        _this.setData({
            timer: timer
        })
    },
    // 点击暂停
    pause: function () {
        clearInterval(this.data.timer); // 清除定时器
        this.setData({
            pauseShow: false,
            continueCancelShow: true,
            backShow: false
        })
    },
    // 点击继续
    continue: function () {
        this.drawActive(); // 继续画图
        this.setData({ // 按键调整
            pauseShow: true, // 暂停显示
            continueCancelShow: false,
            backShow: false
        })
    },
    // 点击放弃
    cancel: function () {
        this.setData({ // 按键调整
            clockShow: false, // 切换到计时页
            pauseShow: true, // 暂停显示(默认重置)
            continueCancelShow: false, // 默认重置
            backShow: false // 默认重置
        })

    },
    // 点击返回
    back: function () {
        clearInterval(this.data.timer); // 清除定时器
        this.setData({
            clockShow: false, // 切换到计时页
            pauseShow: true, // 暂停显示(默认重置)
            continueCancelShow: false, // 默认重置
            backShow: false // 默认重置
        })
    }
})